<template>
  <div class="agcontainer">
    <div class="button">
      <div>
      <!-- 刷新 -->
      <el-button type="primary" icon="el-icon-refresh" @click="tiger" size="mini">
        <!-- 全选删除 -->
      </el-button>
      <el-button type="primary" icon="el-icon-edit" @click="open" size="mini"
        >删除</el-button
      >
      </div>
      <!-- 搜索 -->
      <div class="check">
        <el-input placeholder="请输入内容" v-model="input4" size="mini">
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="handleSelect"
          ></i>
        </el-input>
      </div>
    </div>
    <!-- 订单列表 -->
    <el-table
      ref="multipleTable"
      type="index,"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      stripe
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        prop="work_id"
        label="工单编号"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="start_time" label="接单时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="end_time" label="结束时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="work_user[0].nick_name"
        label="雇主姓名"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="state" label="状态" show-overflow-tooltip>
      </el-table-column>
      <!-- <el-table-column label="是否完成">
        <template slot-scope="scope">
          <el-button size="mini" @click="sure(scope.$index,scope.row)">已完成</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next, jumper,total"
      @current-change="handleCurrentChange"
      :page-size="pagesize"
      :total="tableData.length"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      index: "",
      input4: "",
      restaurants: [],
      state: "",
      timeout: null,
      deletearr: [],
      tableData: [],
      list: [],
      pagesize: 20,
      currpage: 1,
      samlltiger: 1,
      dialogFormVisible: false,
      lastindex: "",
      edit: {
        value: "",
        address: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    editdo() {
      this.tableData[this.lastindex].value = this.edit.value;
      this.tableData[this.lastindex].address = this.edit.address;
      this.dialogFormVisible = false;
    },
    handleDelete(index, row) {
      if (confirm("是否删除该条订单记录" )) {
        this.tableData.splice((this.currpage - 1) * this.pagesize + index, 1);
      } else {
        return false;
      }
    },
    handleDeleteAll() {
      let arr = this.deletearr;
      let totalPage = Math.ceil((this.tableData.length - 1) / this.pagesize);
      let currentPage = this.currpage > totalPage ? totalPage : this.currpage;
      this.currpage = currentPage < 1 ? 1 : currentPage;
      arr.map((item) => {
        this.tableData.map((val, ind) => {
          if (val == item) {
            this.tableData.splice(ind, 1);
          }
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.deletearr = val;
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.samlltiger = val;
      this.currpage = val;
    },
    deal(fin, val) {
      this.tableData[fin].value = val;
    },

    // 全选删除
    open() {
      if (this.deletearr.length != 0) {
        this.$confirm("此操作将永久删除选中文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
          .then(async () => {
            this.handleDeleteAll();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        alert("没有需要删除的文件");
      }
    },
    // 刷新
    tiger() {
      this.tableData=[]
    var token = localStorage.getItem("token");
    this.myaxios({
      url: "http://housekeepi.com/api/workList",
      method: "post",
      data: {
        token: token,
        user_type: "2",
        work: 0,
      },
    })
      .then(
        (res) => {
          for (let j = 0; j < res.data.data.length; j++) {
            if (res.data.data[j].state != 1) {
              //  this.tableData.end_time= res.data.data[j].end_time/1000/60/60/24;
              this.tableData.push(res.data.data[j]);
            }
          }
          console.log(this.tableData);
          for (let i = 0; i < this.tableData.length; i++) {
            let q = new Date(this.tableData[i].start_time * 1000 ).toLocaleString();
            let w = new Date(this.tableData[i].end_time * 1000).toLocaleString();
            this.tableData[i].start_time = q;
            this.tableData[i].end_time = w;
            switch (this.tableData[i].state) {
              case 1:
                this.tableData[i].state = "等待处理";
                break;
              case 2:
                this.tableData[i].state = "用户取消";
                break;
              case 3:
                this.tableData[i].state = "拒绝接单";
                break;
              case 4:
                this.tableData[i].state = "已接单";
                break;
              case 5:
                this.tableData[i].state = "用户取消";
                break;
              case 6:
                this.tableData[i].state = "工作人员取消";
                break;
              case 7:
                this.tableData[i].state = "进行中";
                break;
              case 8:
                this.tableData[i].state = "已完成";
                break;
              case 9:
                this.tableData[i].state = "用户评价";
                break;
            }
          }
        },
        () => {}
      )
      .catch(() => {});
    },

    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      this.tableData = results;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1
        );
      };
    },
    // 查找
    handleSelect() {
      let obj = [];
      for (let i = 0; i < this.tableData.length; i++) {
        if (
          this.input4 === this.tableData[i].work_user[0].nick_name ||
          this.input4 === this.tableData[i].work_id
        ) {
          obj.push(this.tableData[i]);
          this.tableData = obj;
        }
      }
    },
    sure(index,row) {
      // this.tableData[index].state = "已完成";
      // console.log(this.index);
      console.log(row);
      var token = localStorage.getItem("token");
      this.myaxios({
      url: "http://housekeepi.com/api/workModify",
      method: "post",
      data: {
        token: token,
        work_id:row.user_id,
        work: "2",
        state:"8",
      },
    })
    .then((res)=>{
      // console.log(res.data.data);
      // // res.data.data[index].state=8
      row.state=8

    })
    },
  },
  mounted() {
    var token = localStorage.getItem("token");
    this.myaxios({
      url: "http://housekeepi.com/api/workList",
      method: "post",
      data: {
        token: token,
        user_type: "2",
        work: 0,
      },
    })
      .then(
        (res) => {
          for (let j = 0; j < res.data.data.length; j++) {
            if (res.data.data[j].state != 1) {
              this.tableData.push(res.data.data[j]);
            }
          }
          console.log(this.tableData);
          for (let i = 0; i < this.tableData.length; i++) {
            let q = new Date(this.tableData[i].start_time * 1000 ).toLocaleString();
            let w = new Date(this.tableData[i].end_time * 1000).toLocaleString();
            this.tableData[i].start_time = q;
            this.tableData[i].end_time = w;
            switch (this.tableData[i].state) {
              case 1:
                this.tableData[i].state = "等待处理";
                break;
              case 2:
                this.tableData[i].state = "用户取消";
                break;
              case 3:
                this.tableData[i].state = "拒绝接单";
                break;
              case 4:
                this.tableData[i].state = "已接单";
                break;
              case 5:
                this.tableData[i].state = "用户取消";
                break;
              case 6:
                this.tableData[i].state = "工作人员取消";
                break;
              case 7:
                this.tableData[i].state = "进行中";
                break;
              case 8:
                this.tableData[i].state = "已完成";
                break;
              case 9:
                this.tableData[i].state = "用户评价";
                break;
            }
          }
        },
        () => {}
      )
      .catch(() => {});
  },
};
</script>

<style>
.button{
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 5px;
}
.agcontainer {
  margin: 0 auto;
}
.el-pagination{
  margin-top: 5px;
  float: right;
}
</style>